﻿

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">菜单名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="menuname" id="menuname" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">是否可用</label>
                        <div class="layui-input-block">
                            <select name="sel_isactive" id="sel_isactive">
                                <option value="">全部</option>
                                <option value="Y" selected>可用</option>
                                <option value="N">不可用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm open-all" id="open-all">全部展开</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm close-all" id="close-all">全部收起</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm change-icon" id="change-icon">随机更换小图标</button>
                    <button class="layui-btn layuiadmin-btn-useradmin" data-type="add">添加一级菜单</button>
                </div>
                <table id="tree-table1" class="layui-table layui-form layui-anim" lay-filter="LAY-user-manage"></table>
                <script type="text/html" id="imgTpl">
                    <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.avatar }}>
                </script>
            </div>
        </div>
    </div>
    <script src="../../../layuiadmin/layui/layui.js"></script>
    <script src="../../../layuiadmin/js/cookie.js"></script>
    <script src="../../../layuiadmin/layui/treeTable.js"></script>
    <script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
            }).use(['treeTable', 'index', 'code', 'table'], function () {
            var $ = layui.$
                , form = layui.form
                , table = layui.table
                    , treeTable = layui.treeTable;

                //验证用户是否登录
                if ($.cookie("loginid") == "" || $.cookie("loginid") == null || $.cookie("loginid") == "null" || $.cookie("loginid") == undefined || $.cookie("loginid") == "undefined") {
                    $.removeCookie("id", { path: "/", sucue: true });//用户id
                    $.removeCookie("loginid", { path: "/", sucue: true });//登录账号
                    $.removeCookie("username", { path: "/", sucue: true });//用户名
                    $.removeCookie("role", { path: "/", sucue: true });//权限
                    window.location.href = "user/login.html";
                }
                var re = treeTable.render({
                    elem: '#tree-table1',
                    url: 'ashx/list.ashx?type=getlist',
                    icon_key: 'title',
                    toolbar: '#test-table-radio-toolbarDemo',
                    is_checkbox: true,
                    end: function (e) {
                        form.render();
                    },
                    cols: [
                        { key: 'title',title: '菜单名称',width: '100px',template: function (item) {
                                if (item.level == 0) {
                                    return '<span style="color:red;">' + item.title + '</span>';
                                } else if (item.level == 1) {
                                    return '<span style="color:green;">' + item.title + '</span>';
                                } else if (item.level == 2) {
                                    return '<span style="color:#aaa;">' + item.title + '</span>';
                                } else{
                                    return '<span style="color:blue;">' + item.title + '</span>';
                                }
                            }
                        },
                        { key: 'menuurl', width: 150, title: '菜单路径', align: 'center' },
                        {
                            key: 'menulevel', title: '菜单等级', width: '100px', template: function (item) {
                                if (item.level == 0) {
                                    return '<span style="color:red;">一级</span>';
                                } else if (item.level == 1) {
                                    return '<span style="color:green;">二级</span>';
                                } else if (item.level == 2) {
                                    return '<span style="color:#aaa;">三级</span>';
                                } else if (item.level == 3) {
                                    return '<span style="color:#aaa;">四级</span>';
                                } else if (item.level == 4) {
                                    return '<span style="color:#aaa;">五级</span>';
                                }
                            }
                        },
                        { key: 'xh', width: 100, title: '序号', align: 'center' },
                        {
                            key: 'isactive', width: 120, title: '是否可用', align: 'center', template: function (item) {
                                if (item.isactive == 'Y') {
                                    return '<span style="color:green;">可用</span>';
                                } else if (item.isactive == "N") {
                                    return '<span style="color:red;">禁用</span>';
                                }
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            template: function (item) {
                                if (item.isactive == 'Y') {
                                    return '<a lay-filter="add">添加</a>  |  <a lay-filter="edit">编辑</a>  |  <a lay-filter="del">禁用</a>';
                                } else {
                                    return '<a lay-filter="add">添加</a>  |  <a lay-filter="edit">编辑</a>  |  <a lay-filter="start">启用</a>';
                                }
                            }
                        }
                    ]
                });
                // 监听自定义-新增
                treeTable.on('tree(add)', function (data) {
                    var level = data.item.level;
                    if (level >= 2) {
                        layer.msg("只支持到3级菜单！");
                    } else {
                        layer.open({
                            type: 2
                            , title: '添加菜单'
                            , content: 'add.html?parentid=' + data.item.id + '&parentname=' + data.item.title + '&parentlevel=' + level
                            , maxmin: true
                            , area: ['600px', '550px']
                            , btn: ['确定', '取消']
                            , yes: function (index, layero) {
                                var iframeWindow = window['layui-layer-iframe' + index]
                                    , submitID = 'LAY-user-front-submit'
                                    , submit = layero.find('iframe').contents().find('#' + submitID);
                                //监听提交
                                iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                    var obj = $(layero).find("iframe")[0].contentWindow;
                                    var parentmenuname = obj.$("#parentmenuname").val();//上级菜单名称
                                    var parentmenuid = obj.$("#parentmenuid").val();//上级菜单id
                                    var menuname = obj.$("#menuname").val();//菜单名称
                                    var menuurl = obj.$("#menuurl").val();//菜单地址
                                    var menuxh = obj.$("#menuxh").val();//序号
                                    var menuremark = obj.$("#menuremark").val();//备注
                                    level = parseInt(level) + 1;
                                    var isactive = obj.$("#isactive").prop("checked");//是否可用
                                    var arr = new Array();
                                    if (menuname == "" || menuname == null || menuname == undefined) {
                                        layer.msg('请填写菜单名称', { icon: 5 });
                                        return;
                                    }
                                    if (menuname != "") {
                                        var add = {
                                            "parentmenuname": parentmenuname,
                                            "parentmenuid": parentmenuid,
                                            "menuname": menuname,
                                            "menuurl": menuurl,
                                            "menuxh": menuxh,
                                            "menuremark": menuremark,
                                            "level": level,
                                            "isactive": isactive
                                        };
                                        arr.push(add);
                                        $.ajax({
                                            url: 'ashx/list.ashx?type=add',
                                            type: "post",
                                            contentType: "application/json",
                                            dataType: "json",
                                            data: JSON.stringify({ 'LoadData_type': arr }),
                                            success: function (res) {
                                                if (res.flag == "True") {
                                                    layer.close(index);
                                                    layer.msg(res.remsg, {
                                                        time: 2000,
                                                        end: function () {
                                                            //执行重载
                                                            treeTable.render(re);
                                                        }
                                                    })
                                                }
                                                else {
                                                    layer.alert(res.remsg);
                                                }
                                            }
                                        })
                                    }
                                });
                                submit.trigger('click');
                            }
                        })
                    }
                   
                })
                //编辑
                treeTable.on('tree(edit)', function (data) {
                    var level = data.item.level;
                    var editid = data.item.id;
                    layer.open({
                        type: 2
                        , title: '修改菜单'
                        , content: 'edit.html?editid=' + editid + '&level=' + level
                        , maxmin: true
                        , area: ['600px', '550px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            var iframeWindow = window['layui-layer-iframe' + index]
                                , submitID = 'LAY-user-front-submit'
                                , submit = layero.find('iframe').contents().find('#' + submitID);
                            //监听提交
                            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                var obj = $(layero).find("iframe")[0].contentWindow;
                                var parentmenuname = obj.$("#parentmenuname").val();//上级菜单名称
                                var parentmenuid = obj.$("#parentmenuid").val();//上级菜单id
                                var menuname = obj.$("#menuname").val();//菜单名称
                                var menuurl = obj.$("#menuurl").val();//菜单地址
                                var menuxh = obj.$("#menuxh").val();//序号
                                var menuremark = obj.$("#menuremark").val();//备注
                                var isactive = obj.$("#isactive").prop("checked");//是否可用
                                var arr = new Array();
                                if (menuname == "" || menuname == null || menuname == undefined) {
                                    layer.msg('请填写菜单名称', { icon: 5 });
                                    return;
                                }
                                if (menuname != "") {
                                    var add = {
                                        "id": editid,
                                        "parentmenuid": parentmenuid,
                                        "menuname": menuname,
                                        "menuurl": menuurl,
                                        "menuxh": menuxh,
                                        "menuremark": menuremark,
                                        "level": level,
                                        "isactive": isactive
                                    };
                                    arr.push(add);
                                    $.ajax({
                                        url: 'ashx/list.ashx?type=edit',
                                        type: "post",
                                        contentType: "application/json",
                                        dataType: "json",
                                        data: JSON.stringify({ 'LoadData_type': arr }),
                                        success: function (res) {
                                            if (res.flag == "True") {
                                                layer.close(index);
                                                layer.msg(res.remsg, {
                                                    time: 2000,
                                                    end: function () {
                                                        //执行重载
                                                        treeTable.render(re);
                                                    }
                                                })
                                            }
                                            else {
                                                layer.alert(res.remsg);
                                            }
                                        }
                                    })
                                }
                            });
                            submit.trigger('click');
                        }
                    });
                })
                //禁用
                treeTable.on('tree(del)', function (data) {
                    layer.confirm('确定要禁用吗', function (index) {
                        $.ajax({
                            url: 'ashx/list.ashx?type=delete&getids=' + data.item.id,
                            type: "post",
                            contentType: "application/json",
                            dataType: "json",
                            data: {},
                            success: function (res) {
                                var index = parent.layer.getFrameIndex(window.name);
                                if (res.flag == "True") {
                                    layer.msg(res.remsg, {
                                        time: 2000,
                                        end: function () {
                                            //执行重载
                                            treeTable.render(re);
                                        }
                                    })
                                }
                                else {
                                    layer.alert(res.remsg);
                                }
                            }
                        });
                    });
                })
                //启用
                treeTable.on('tree(start)', function (data) {
                    layer.confirm('确定要启用吗', function (index) {
                        $.ajax({
                            url: 'ashx/list.ashx?type=start&getids=' + data.item.id,
                            type: "post",
                            contentType: "application/json",
                            dataType: "json",
                            data: {},
                            success: function (res) {
                                var index = parent.layer.getFrameIndex(window.name);
                                if (res.flag == "True") {
                                    layer.msg(res.remsg, {
                                        time: 2000,
                                        end: function () {
                                            //执行重载
                                            treeTable.render(re);
                                        }
                                    })
                                }
                                else {
                                    layer.alert(res.remsg);
                                }
                            }
                        });
                    });
                })
                //事件-新增一级菜单
                var active = {
                   add: function () {
                        layer.open({
                            type: 2
                            , title: '添加菜单'
                            , content: 'add.html?parentid=0&parentlevel=-1'
                            , maxmin: true
                            , area: ['600px', '550px']
                            , btn: ['确定', '取消']
                            , yes: function (index, layero) {
                                var iframeWindow = window['layui-layer-iframe' + index]
                                    , submitID = 'LAY-user-front-submit'
                                    , submit = layero.find('iframe').contents().find('#' + submitID);
                                //监听提交
                                iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                                    var obj = $(layero).find("iframe")[0].contentWindow;
                                    var parentmenuname = obj.$("#parentmenuname").val();//上级菜单名称
                                    var parentmenuid = obj.$("#parentmenuid").val();//上级菜单id
                                    var menuname = obj.$("#menuname").val();//菜单名称
                                    var menuurl = obj.$("#menuurl").val();//菜单地址
                                    var menuxh = obj.$("#menuxh").val();//序号
                                    var menuremark = obj.$("#menuremark").val();//备注
                                    var level = 0;
                                    var isactive = obj.$("#isactive").prop("checked");//是否可用
                                    var arr = new Array();
                                    if (menuname == "" || menuname == null || menuname == undefined) {
                                        layer.msg('请填写菜单名称', { icon: 5 });
                                        return;
                                    }
                                    if (menuname != "") {
                                        var add = {
                                            "parentmenuname": parentmenuname,
                                            "parentmenuid": parentmenuid,
                                            "menuname": menuname,
                                            "menuurl": menuurl,
                                            "menuxh": menuxh,
                                            "menuremark": menuremark,
                                            "level": level,
                                            "isactive": isactive
                                        };
                                        arr.push(add);
                                        $.ajax({
                                            url: 'ashx/list.ashx?type=add',
                                            type: "post",
                                            contentType: "application/json",
                                            dataType: "json",
                                            data: JSON.stringify({ 'LoadData_type': arr }),
                                            success: function (res) {
                                                if (res.flag == "True") {
                                                    layer.close(index);
                                                    layer.msg(res.remsg, {
                                                        time: 2000,
                                                        end: function () {
                                                            //执行重载
                                                            treeTable.render(re);
                                                        }
                                                    })
                                                }
                                                else {
                                                    layer.alert(res.remsg);
                                                }
                                            }
                                        })
                                    }
                                });
                                submit.trigger('click');
                            }
                        });
                    }
                };
                // 全部展开
                $('#open-all').click(function () {
                    treeTable.openAll(re);
                })
                // 全部关闭
                $('#close-all').click(function () {
                    treeTable.closeAll(re);
                })
                // 随机更换小图标
                $('#change-icon').click(function () {
                    var arr = [
                        {
                            open: 'layui-icon layui-icon-set',
                            close: 'layui-icon layui-icon-set-fill',
                            left: 16,
                        },
                        {
                            open: 'layui-icon layui-icon-rate',
                            close: 'layui-icon layui-icon-rate-solid',
                            left: 16,
                        },
                        {
                            open: 'layui-icon layui-icon-tread',
                            close: 'layui-icon layui-icon-praise',
                            left: 16,
                        },
                        {
                            open: 'layui-icon layui-icon-camera',
                            close: 'layui-icon layui-icon-camera-fill',
                            left: 16,
                        },
                        {
                            open: 'layui-icon layui-icon-user',
                            close: 'layui-icon layui-icon-group',
                            left: 16,
                        },
                    ];
                    var round = Math.round(Math.random() * (arr.length - 1));
                    re.icon = arr[round];
                    treeTable.render(re);
                })
            $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    </script>
</body>
</html>
